<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>优房数据房产报告（付费版）</title>

    <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <style>
        .col-center-block {
            float: none;
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 840px;
            border: 1px solid #e2e2e2;
            overflow:hidden;
            margin-bottom: 15px;
            padding: 15px;
            text-align:center;
            font-size: 13px;
            font-style: normal;
        }

    </style>


</head>
<body>
<div class="container">
    <div class="row col-center-block">
        <div id="InventoryMeasure_Zip_Public"  style="width: 100%;height:400px; float:left;"></div>
    </div>

    <div class="row col-center-block">
        <div id="CommuteIndex_Chart" style="width: 100%;height:400px; float:left;"></div>
    </div>

    <div class="row col-center-block">
        <div id="test"  style="width: 100%;height:400px; float:left;"></div>
    </div>

</div>

<script type="text/javascript" th:inline="javascript">

    var InventoryMeasure_Zip_Public = echarts.init(document.getElementById('InventoryMeasure_Zip_Public'));

    var InventoryMeasure_Zip_Public_Names = [];
    var InventoryMeasure_Zip_Public_Values = [];
    var items = [[${InventoryMeasure_Zip_Public}]];

    $.each(items, function(index, item) {
        if (item.time != null) {

            InventoryMeasure_Zip_Public_Names.push(item.time);//循环添加name
            InventoryMeasure_Zip_Public_Values.push(item.value);//循环添加value
        }
    });


    var InventoryMeasure_Zip_Public_option = {
        title: {
            text: '销售存量'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: InventoryMeasure_Zip_Public_Names,
            axisLabel: {
                //interval:0,
                rotate:45
            }
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            symbol:'none',
            data: InventoryMeasure_Zip_Public_Values
        }]

    };
    InventoryMeasure_Zip_Public.setOption(InventoryMeasure_Zip_Public_option);


    var CommuteIndex_Chart = echarts.init(document.getElementById('CommuteIndex_Chart'));
    var CommuteIndexData = [[${CommuteIndex}]];
    var CommuteIndex_Chart_Option = {
        legend: {
            orient: 'vertical',
            left: '20',
            top: '20',
            data: ['骑车', '驾车', '步行', '公交']
        },
        series : [{
            name: '通勤指数',
            type: 'pie',
            x: '0%',
            radius :  ['16%', '50%'],//圆的内外半径
            center: ['49%', '60%'],//圆的X,Y轴平移
            data:[
                {
                    value: CommuteIndexData.bike,
                    name: '骑车',
                    itemStyle:{//圆形颜色
                        normal:{color:'#00b8ee'}
                    }
                },
                {
                    value: CommuteIndexData.car,
                    name: '驾车',
                    itemStyle:{
                        normal:{color:'#fe9e25'}
                    }
                },
                {
                    value: CommuteIndexData.foot,
                    name: '步行',
                    itemStyle:{//圆形颜色
                        normal:{color:'#8fc320'}
                    }
                },
                {
                    value: CommuteIndexData.transit,
                    name: '公交',
                    itemStyle:{
                        normal:{color:'#d2335b'}
                    }
                }
            ]
        }]
    };
    CommuteIndex_Chart.setOption(CommuteIndex_Chart_Option);

    var test = echarts.init(document.getElementById('test'));

   var  option = {
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    test.setOption(option);
</script>

</body>
</html>